<%--
  Created by IntelliJ IDEA.
  User: 李元峰
  Date: 2022/11/6
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>万码招聘 - 注册</title>
</head>
<body>

<div class="pxp-preloader"><span>Loading...</span></div>

<!--Head-->
<jsp:include page="/web/personal/inc/personalSignUpHead"/>

<!--js代码-->

<script type="text/javascript">

</script>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="row align-items-center pxp-sign-hero-container">
        <div class="col-xl-6 pxp-column">
            <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                <img src="/static/web/images/signup-big-fig.png" alt="Sign up">
                <h1 class="mt-4 mt-lg-5">创建账号</h1>
            </div>
        </div>
        <div class="col-xl-6 pxp-column pxp-is-light">
            <div class="pxp-sign-hero-form pb-100 pt-100">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-xl-7 col-xxl-5">
                        <div class="pxp-sign-hero-form-content">
                            <h5 class="text-center">输入基本信息</h5>
                            <form id="myform" method="post" action="/web/signUpUserInformation" class="mt-4">
                                <input type="hidden" name="id" value="${requestScope.id}"/>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="name_msg"></span>
                                    <div class="form-floating mb-3">
                                        <input name="name" type="text" class="form-control" id="name" placeholder="请输入您的真实姓名">
                                        <label for="name" style="font-weight: bold;">姓名</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color:red;" id="sex_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="sex" class="form-select" id="sex">
                                            <option value="0" selected disabled hidden>请选择</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                        <label for="sex" style="font-weight: bold;">性别</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="birth_msg"></span>
                                    <div class="form-floating mb-3">
                                        <input name="birthday" type="date" class="form-control" id="birthday" placeholder="请输入您的生日">
                                        <label for="birthday" style="font-weight: bold;">生日</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="email_msg"></span>
                                    <div class="form-floating mb-3">
                                        <input name="email" type="text" class="form-control" id="email" placeholder="请输入您的邮箱">
                                        <label for="email" style="font-weight: bold;">邮箱</label>
                                    </div>
                                </div>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="school_msg"></span>
                                    <div class="form-floating mb-3">
                                        <input name="school" type="text" class="form-control" id="school" placeholder="请输入您的毕业院校">
                                        <label for="school" style="font-weight: bold;">毕业院校</label>
                                    </div>
                                </div>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="edu_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="highestEducationId" class="form-select" id="highestEducation">
                                            <option disabled selected hidden>请选择</option>
                                            <c:forEach items="${requestScope.educations}" var="education">
                                                <option value="${education.id}">${education.educationName}</option>
                                            </c:forEach>
                                        </select>
                                        <label for="highestEducation" style="font-weight: bold;">最高学历</label>
                                    </div>
                                </div>

                                <input style="width: 285px;" type="submit" value="下一步" class="btn rounded-pill pxp-sign-hero-form-cta" id="submitButton">
                                <div class="mt-4 text-center pxp-sign-hero-form-small" style="font-weight: bold;">
                                    已经有一个账号？<a href="/web/personal/signIn">登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--<!--foot-->--%>
<%--<jsp:include page="/web/personal/inc/personalSignUpFoot"/>--%>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>
</html>

<script>
    $(function (){
        $("#name").blur(checkName);
        $("#sex").blur(checkSex);
        $("#birthday").blur(checkBirth);
        $("#email").blur(checkEmail);
        $("#school").blur(checkSchool);
        $("#highestEducation").blur(checkEdu);
        $("#myform").submit(function (){
           return checkName()&&checkSex()&&checkEmail()&&checkBirth()&&checkSchool()&&checkEdu();
        });
    });

    //验证名字
    function checkName()
    {
        var name = $("#name").val();
        if (name==""||name==null)
        {
            $("#name_msg").html("*必填");
            $("#name").focus();
            return false;
        }
        let zheng = /(^[\u4e00-\u9fa5]{2,5})|([a-zA-Z]{2,20})$/;
        if (!zheng.test(name))
        {
            $("#name_msg").html("名字格式有误");
            $("#name").focus();
            return false;
        }
        $("#name_msg").html("");
        return true;
    }

    //验证性别
    function checkSex()
    {
        var sex = $("#sex").val();
        if (sex==null)
        {
            $("#sex_msg").html("*必填");
            $("#sex").focus();
            return false;
        }
        $("#sex_msg").html("");
        return true;
    }
    //验证生日
    function checkBirth()
    {
        var birth = $("#birthday").val();
        if (birth==""||birth==null)
        {
            $("#birth_msg").html("*必填");
            $("#birthday").focus();
            return false;
        }
        let today = new Date();
        let birthYear = birth.split("-")[0];
        if (today.getFullYear()-parseInt(birthYear)<=16)
        {
            $("#birth_msg").html("年龄小于16岁，不允许进本网站哟");
            $("#birthday").focus();
            return false;
        }
        $("#birth_msg").html("");
        return true;
    }

    //验证邮箱
    function checkEmail()
    {
        var email = $("#email").val();
        if (email=="")
        {
            $("#email_msg").html("*必填");
            $("#email").focus();
            return false;
        }
        let zheng = /^.{2,20}@.{3,15}$/;
        if (!zheng.test(email))
        {
            $("#email_msg").html("邮箱格式有误");
            $("#email").focus();
            return false;
        }
        $("#email_msg").html("");
        return true;
    }

    //验证毕业院校
    function checkSchool()
    {
        var school = $("#school").val();
        if (school=="")
        {
            $("#school_msg").html("*必填");
            $("#school").focus();
            return false;
        }
        let zheng = /^.{3,50}$/;
        if (!zheng.test(school))
        {
            $("#school_msg").html("学校格式有误");
            $("#school").focus();
            return false;
        }
        $("#school_msg").html("");
        return true;
    }

    function checkEdu()
    {
        let edu = $("#highestEducation").val();
        if (edu==null)
        {
            $("#edu_msg").html("请选择您的最高学历");
            return false;
        }
        $("#edu_msg").html("");
        return true;
    }
</script>